import Vue from 'vue'
import VueRouter from 'vue-router'
// VueRouter是Vue的一个插件，通过Vue提供的use方法，接入
Vue.use(VueRouter)

// 导入路由规则匹配成功后渲染的组件
import Home from '../views/Home'
import Profile from '../views/Profile'
import Notfound from '../views/Notfound'

import Detail from '../views/Detail'
import News from '../views/News'
import List from '../views/News/list'
import Add from '../views/News/add'

// 路由规则，配置式路由
const routes = [
  {
    // 访问的路由路径 /
    path: '/home',
    // 当前uri和path路径一致时，渲染此组件
    component: Home
  },
  {
    path: '/news',
    component: News,
    // 嵌套路由
    children: [
      {
        path: 'list',
        component: List
      },
      {
        path: 'add',
        component: Add
      }
    ]
  },
  // 新闻详情页面
  {
    // 路由别名,给当前的路由规则起一个别名
    name:'detail',
    // 动态路由参数
    path: '/detail/:newsid',
    component: Detail,
    // props是一种隐式转递，更安全，但是不便于代码调试
    props: { name: 'aaaa' }
  },
  {
    path: '/profile',
    component: Profile
  },
  // 重定向 让一个链接跳转到另一个链接
  {
    // 当前访问地址
    path: '/',
    // 跳转到的路由地址
    redirect: '/home'
  },
  // 404页面，访问的路由规则没有定义，指定要显示的界面
  {
    path: '*',
    component: Notfound
  }
]

// 实例化VueRouter，让路由生效
const router = new VueRouter({
  // 路由的模式，默认为 hash模式， history模式，此模式在上线后需要配置web服务器的
  // mode: 'history',
  // 路由前缀 默认 /
  // base: process.env.BASE_URL,
  // 路由规则
  routes
})

// 模块化导出
export default router
